<html>
  
  <head>
    
    <title>
       Google Visualization - Motion Chart
    </title>

    <!-- call the Google Java Script API -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <!-- call the core chart packages from google -->
    <script type="text/javascript">
       google.load('visualization', '1', {packages: ['motionchart']});
    </script>

    <!-- This is the section that contains the data and visualization calls -->
      <script type="text/javascript">
        function drawVisualization() {

        // Create a Google data table to hold the data that will be visualized
        var data = new google.visualization.DataTable();

        //define the Columns type and Name
        data.addColumn('string', 'Department');
        data.addColumn('date'  , 'Date');
        data.addColumn('number', 'Millions of Dollars');

        //define the number of rows in the table
        data.addRows(8);

        //data.setValue(row, column, value)
        //for each row there are two columns each column is set individually
        data.setValue(0, 0, 'Reseach and Development');
        data.setValue(0, 1, new Date (1980,0,1));
        data.setValue(0, 2, 4);

        data.setValue(1, 0, 'Manufacturing');
        data.setValue(1, 1, new Date (1980,0,1));
        data.setValue(1, 2, 3);

        data.setValue(2, 0, 'Marketing');
        data.setValue(2, 1, new Date (1980,0,1));
        data.setValue(2, 2, 2);

        data.setValue(3, 0, 'Distribution');
        data.setValue(3, 1, new Date (1980,0,1));
        data.setValue(3, 2, 1);

        data.setValue(4, 0, 'Reseach and Development');
        data.setValue(4, 1, new Date (1981,0,1));
        data.setValue(4, 2, 4.5);

        data.setValue(5, 0, 'Manufacturing');
        data.setValue(5, 1, new Date (1981,0,1));
        data.setValue(5, 2, 2);

        data.setValue(6, 0, 'Marketing');
        data.setValue(6, 1, new Date (1981,0,1));
        data.setValue(6, 2, 3);

        data.setValue(7, 0, 'Distribution');
        data.setValue(7, 1, new Date (1981,0,1));
        data.setValue(7, 2, 1.8);

        // Create the visualization based on the data above
        new google.visualization.MotionChart(document.getElementById('visCostsMotionChart')).draw(data);
      }

      google.setOnLoadCallback(drawVisualization);
    </script>
    
   </head>
 
   <body>
   
      <!-- this div tag is what places the visualization on the web page -->
     <div id="visCostsMotionChart" style="width: 800px; height: 400px;"></div>
     
  </body>
  
</html>>